<template>
  <div class="page Dstore">
    <van-nav-bar title="出入库" left-arrow @click-left="$router.go(-1)"/>
    <!-- <top-search @search="searchFunc" v-model="search.searchValue" placeholder="请输入业务员名称" bgcolor="#fff"></top-search> -->
    
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="'./img/time.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.createTime }}</span>
          </div>
          <div>
            <span @click="reject(item.applyId)" class="font-red" style="font-size: 14px; margin-right: 16px;">拒绝</span>
            <span @click="blank.showBlank(item)" class="font-blue" style="font-size: 14px;">审批</span>
          </div>
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">业务员</span>
            <span>{{ item.salesmanName }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">业务员id</span>
            <span>{{ item.salesmanId }}</span>
          </div>
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">机柜数</span>
            <span>{{ item.equipmentNum }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">充电宝数</span>
            <span>{{ item.chargerNum }}</span>
          </div>
        </div>
      </div>
    </van-list>

    <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
      <div class="page">
        <van-nav-bar title="审批" left-arrow @click-left="blank.show = false"/> 
        <div class="flex-row sp-box">
          <div :style="`background: url(./img/sp1.png) center center / 100% 100%;`">
            <div>机柜</div>
            <div style="font-weight: bold;">{{ blank.terminalSnList.length }}/{{ blank.equipmentNum }}</div>
          </div>
          <div :style="`background: url(./img/sp2.png) center center / 100% 100%;`">
            <div>充电宝</div>
            <div style="font-weight: bold;">{{ blank.chargerSnList.length }}/{{ blank.chargerNum }}</div>
          </div>
        </div>
        <div style="margin: 1.11rem 16px 0;">
          <van-button block type="info" @click="blank.saoma">扫码</van-button>
        </div>
        <div style="margin: 0.8rem 16px 0;">
          <van-button block type="info" @click="blank.submit">提交</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        searchValue: ''
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: [],

      blank: {
        show: false,
        equipmentNum: 0,
        chargerNum: 0,
        terminalSnList: [],
        chargerSnList: [],
        applyId: '',
        showBlank: (item) => {
          this.blank.terminalSnList = [];
          this.blank.chargerSnList = [];
          this.blank.equipmentNum = item.equipmentNum;
          this.blank.chargerNum = item.chargerNum;
          this.blank.applyId = item.applyId;
          this.blank.show = true;
        },
        jiancha: (equipmentId, type) => {
          if( type ) {
            if( this.blank.terminalSnList.indexOf( equipmentId ) > -1 ) {
              this.$toast('该设备编码已经在列表中');
            } else {
              this.blank.terminalSnList.push( equipmentId );
            }
          } else {
            if( this.blank.chargerSnList.indexOf( equipmentId ) > -1 ) {
              this.$toast('该充电宝编码已经在列表中');
            } else {
              this.blank.chargerSnList.push( equipmentId );
            }
          }
          // 判断设备列表满了吗
          if(this.blank.terminalSnList.length < this.blank.equipmentNum || this.blank.chargerSnList.length < this.blank.chargerNum) {
            this.$toast(`已成功扫码${ this.blank.terminalSnList.length }个机柜，${ this.blank.chargerSnList.length }个充电宝。`);
            this.saoma();
          } else {
            this.$toast('设备列表已扫码完毕，请点击提交');
          } 
        },
        saoma: () => {
          this.$tool.scanEquipmentOrSn().then(res => {
            this.blank.jiancha(res.code, res.type == 1);
          });
        },
        submit: () => {
          if (this.blank.terminalSnList.length != this.blank.equipmentNum) {
            this.$toast('机柜数不对');
            return ;
          }
          if (this.blank.chargerSnList.length != this.blank.chargerNum) {
            this.$toast('充电宝数不对');
            return ;
          }
          let terminalSnList = this.blank.terminalSnList.slice(0);
          let chargerSnList = this.blank.chargerSnList.slice(0);
          this.$axios.post('/api/bjk/outApproval', {
            applyId: this.blank.applyId, terminalSnList, chargerSnList
          }).then(() => {
            this.$toast('操作成功');
            this.blank.show = false;
            this.searchFunc();
          });
        }
      }
    };
  },
  methods: {
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { page, size, applyStatus: 0 };
      if (search.searchValue) query.searchValue = search.searchValue;

      this.$axios.get('/api/bjk/applyList', query).then(res => {
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    reject(applyId) {
      this.$dialog.confirm({ message: `确定要拒绝该审批吗？` }).then(() => {
        this.$axios.post('/api/bjk/rejectApply', {
          query: { applyId } 
        }).then(() => {
          this.$toast('已拒绝');
          this.blank.show = false;
          this.searchFunc();
        });
      });
    }
  },
  mounted() { 
  },
};
</script>

<style lang="less">
.Dstore {
  .sp-box {
    box-sizing: border-box; 
    padding: 0.4rem; 
    background: #fff;
    & > div {
      width: 4.4rem; 
      height: 1.6rem;
      border-radius: 0.13rem;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 0.2rem 0.5rem;
      font-size: 14px;
    }
  }
}
</style>